import { Form, Input, Button, Checkbox } from 'antd';
import stl from './login.module.less';
import { userLogin } from "../../apis/account";
import { rsaEncode } from "../../utils/rsa";
import store from 'store';
import { useHistory } from "react-router-dom";
import { S_MAN_TOKEN } from "../../utils/constant";

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const tailLayout = {
  wrapperCol: { offset: 4, span: 20 },
};

const Login = () => {
  const h = useHistory();
  const onFinish = (values: any) => {
    userLogin({
      username: values.username,
      password: rsaEncode(values.password)
    }).then((res: any) => {
      if (res && res.success) {
        store.set(S_MAN_TOKEN, res.data.token);
        h.push("/home")
      }
    })
  };

  return (
    <Form
      className={stl.login}
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >
      <Form.Item
        label="账户"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>记住密码</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" block={true} htmlType="submit">
          立即登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;